<template>
  <div>
    <table class="table table-bordered table-vertical-middle" v-loading="loading">
      <tr>
        <td colspan="4" class="font-weight-bold text-center">主体基本信息</td>
      </tr>
      <tr>
        <td class="td-label" width="20%">主体名称</td>
        <td width="30%" :class="tdClass">
          <span v-if="isView">{{ customer.customer_name || '-' }}</span>
          <el-input v-else v-model="customer.customer_name" placeholder="主体名称"></el-input>
        </td>
        <td class="td-label" width="20%">主体类型</td>
        <td width="30%" :class="tdClass">
          <span v-if="isView">{{ customer.org_class_name }}</span>
          <select-farm-org
            v-else
            class="form-control-ml"
            v-model="customer.org_class"
            placeholder="主体类型"
            @select="setClassName"
          ></select-farm-org>
        </td>
      </tr>
      <tr v-if="+customer.customer_type === 1">
        <td class="td-label">统一社会信用代码证号</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.register_no || '-' }}</span>
          <el-input
            v-else
            @change="checkRegisterNo"
            v-model="customer.register_no"
            placeholder="统一社会信用代码证号"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">主体等级</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.customer_lever || '-' }}</span>
          <el-input v-else v-model="customer.customer_lever" placeholder="主体等级"></el-input>
        </td>
        <td class="td-label">家庭农场主/合作社实际经营人</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.corp_name || '-' }}</span>
          <el-input v-else placeholder="负责人" v-model="customer.corp_name"></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">联系方式</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.mobile_no || '-' }}</span>
          <el-input
            v-else
            placeholder="联系方式"
            @change="checkMobileNo"
            v-model="customer.mobile_no"
          ></el-input>
        </td>
        <td class="td-label">身份证号</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.lender_idcard || '-' }}</span>
          <el-input
            v-else
            placeholder="身份证号"
            @change="checkIdCard"
            v-model="customer.lender_idcard"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">经营地址</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.address || '-' }}</span>
          <select-address
            v-else
            auto-top
            class="form-control-ml"
            placeholder="经营地址"
            v-model="customer.address_code"
          ></select-address>
        </td>
        <td class="td-label">详细地址</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.address_detail || '-' }}</span>
          <el-input v-else placeholder="详细地址" v-model="customer.address_detail"></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">申请金融信息</td>
      </tr>
      <tr>
        <td class="td-label">申请金额(万元)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.apply_funds || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 2 }"
            placeholder="申请金额(万元)"
            v-model="customer.apply_funds"
          ></el-input>
        </td>
        <td class="td-label">已有贷款余额(万元)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.left_loan_funds || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 2 }"
            placeholder="已有贷款余额(万元)"
            v-model="customer.left_loan_funds"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">贷款用途</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.funds_use_dir || '-' }}</span>
          <el-input
            v-else
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="贷款用途"
            v-model="customer.funds_use_dir"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">土地信息</td>
      </tr>
      <tr>
        <td class="td-label">流转来的面积（亩）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.converse_area || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 2 }"
            placeholder="流转来的面积（亩）"
            v-model="customer.converse_area"
          ></el-input>
        </td>
        <td class="td-label">自营土地面积（亩）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.self_bus_area || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 2 }"
            placeholder="自营土地面积（亩）"
            v-model="customer.self_bus_area"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">土地总面积（亩）</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.solid_area_total || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 2 }"
            placeholder="土地总面积（亩）"
            v-model="customer.solid_area_total"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">经营信息</td>
      </tr>
      <tr>
        <td class="td-label">主营业务类型</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.main_business || '-' }}</span>
          <el-input v-else placeholder="主营业务类型" v-model="customer.main_business"></el-input>
        </td>
        <td class="td-label">实际经营年限</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.business_years || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 0 }"
            placeholder="实际经营年限"
            v-model="customer.business_years"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">经营品种</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.parent_main_business || '-' }}</span>
          <el-input
            v-else
            placeholder="经营品种"
            v-model="customer.parent_main_business"
          ></el-input>
        </td>
        <td class="td-label">年经营收入（万元）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.annual_income || '-' }}</span>
          <el-input
            v-else
            v-input-number="{ min: 0, fixed: 2 }"
            placeholder="年经营收入（万元）"
            v-model="customer.annual_income"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">经营规模</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.business_scale || '-' }}</span>
          <el-input
            v-else
            placeholder="经营规模"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.business_scale"
          ></el-input>
        </td>
        <td class="td-label">规模单位</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.scale_unit || '-' }}</span>
          <el-input v-else placeholder="规模单位" v-model="customer.scale_unit"></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">商品房</td>
      </tr>
      <tr>
        <td class="td-label">面积（平方米）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.commercial_residential_building || '-' }}</span>
          <el-input
            v-else
            placeholder="面积（平方米）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.commercial_residential_building"
          ></el-input>
        </td>
        <td class="td-label">购置价（万元）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.buy_value || '-' }}</span>
          <el-input
            v-else
            placeholder="购置价（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.buy_value"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">农村住房</td>
      </tr>
      <tr>
        <td class="td-label">宅基地面积（平方）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.house_area || '-' }}</span>
          <el-input
            v-else
            placeholder="宅基地面积（平方）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.house_area"
          ></el-input>
        </td>
        <td class="td-label">房屋建造成本(万元)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.build_cost || '-' }}</span>
          <el-input
            v-else
            placeholder="房屋建造成本（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.build_cost"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">厂房</td>
      </tr>
      <tr>
        <td class="td-label">面积（平方米）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.workshop_area || '-' }}</span>
          <el-input
            v-else
            placeholder="面积（平方米）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.workshop_area"
          ></el-input>
        </td>
        <td class="td-label">建造成本（万元）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.workshop_cost || '-' }}</span>
          <el-input
            v-else
            placeholder="建造成本（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.workshop_cost"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">大棚信息</td>
      </tr>
      <tr>
        <td class="td-label">大棚规格</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.ghouse_spec || '-' }}</span>
          <el-input v-else placeholder="大棚规格" v-model="customer.ghouse_spec"></el-input>
        </td>
        <td class="td-label">数量</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.ghouse_area || '-' }}</span>
          <el-input
            v-else
            placeholder="数量"
            v-input-number="{ min: 0, fixed: 0 }"
            v-model="customer.ghouse_area"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">建造成本（万元）</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.ghouse_cost || '-' }}</span>
          <el-input
            v-else
            placeholder="建造成本（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.ghouse_cost"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">农机设备</td>
      </tr>
      <tr>
        <td class="td-label">农机设备名称</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.amachine_name || '-' }}</span>
          <el-input v-else placeholder="农机设备名称" v-model="customer.amachine_name"></el-input>
        </td>
        <td class="td-label">农机购置时间</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.amachine_time || '-' }}</span>
          <el-input v-else placeholder="农机购置时间" v-model="customer.amachine_time"></el-input>
          <!-- <span v-if="isView">{{$utils.dateFormat(customer.amachine_time, 'yyyy-MM-dd') || '-'}}</span>
          <el-date-picker v-else
                          class="w-100"
                          v-model="customer.amachine_time"
                          type="date"
                          placeholder="农机购置时间"
                          value-format="yyyy-MM-dd"></el-date-picker> -->
        </td>
      </tr>
      <tr>
        <td class="td-label">农机设备价格(万元)</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.amachine_price || '-' }}</span>
          <el-input
            v-else
            placeholder="农机设备价格（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.amachine_price"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">车辆信息</td>
      </tr>
      <tr>
        <td class="td-label">品牌型号</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.brand_model || '-' }}</span>
          <el-input v-else placeholder="品牌型号" v-model="customer.brand_model"></el-input>
        </td>
        <td class="td-label">购置时间</td>
        <td :class="tdClass">
          <!-- <span v-if="isView">{{$utils.dateFormat(customer.brand_purchase_time, 'yyyy-MM-dd') || '-'}}</span>
          <el-date-picker v-else
                          class="w-100"
                          v-model="customer.brand_purchase_time"
                          type="date"
                          placeholder="购置时间"
                          value-format="yyyy-MM-dd"></el-date-picker> -->
          <span v-if="isView">{{ customer.brand_purchase_time || '-' }}</span>
          <el-input v-else placeholder="购置时间" v-model="customer.brand_purchase_time"></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">购置价格</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.accumulation_price || '-' }}</span>
          <el-input
            v-else
            placeholder="购置价格"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.accumulation_price"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">已有借款信息</td>
      </tr>
      <tr>
        <td class="td-label">贷款机构</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.lending_institution || '-' }}</span>
          <el-input v-else placeholder="贷款机构" v-model="customer.lending_institution"></el-input>
        </td>
        <td class="td-label">期限</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.load_years || '-' }}</span>
          <el-input v-else placeholder="期限" v-model="customer.load_years"></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">借款金额</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.borrowing_balance || '-' }}</span>
          <el-input
            v-else
            placeholder="借款金额"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.borrowing_balance"
          ></el-input>
        </td>
        <td class="td-label">尚未偿还金额(万元)</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.no_repay_funds || '-' }}</span>
          <el-input
            v-else
            placeholder="尚未偿还金额（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.no_repay_funds"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">信用卡信息</td>
      </tr>
      <tr>
        <td class="td-label">发卡机构</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.card_issuer || '-' }}</span>
          <el-input v-else placeholder="发卡机构" v-model="customer.card_issuer"></el-input>
        </td>
        <td class="td-label">额度（万元）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.limit_funds || '-' }}</span>
          <el-input
            v-else
            placeholder="额度（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.limit_funds"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">已使用额度（万元）</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.used_funds || '-' }}</span>
          <el-input
            v-else
            placeholder="已使用额度（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.used_funds"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">对外担保情况</td>
      </tr>
      <tr>
        <td class="td-label">贷款机构（包括但不限于银行）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.gua_lending_institution || '-' }}</span>
          <el-input
            v-else
            placeholder="贷款机构（包括但不限于银行）"
            v-model="customer.gua_lending_institution"
          ></el-input>
        </td>
        <td class="td-label">期限</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.gua_deadline || '-' }}</span>
          <el-input v-else placeholder="期限" v-model="customer.gua_deadline"></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">担保金额（万元）</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.amount_guaranteed || '-' }}</span>
          <el-input
            v-else
            placeholder="担保金额（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.amount_guaranteed"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">农业保险信息</td>
      </tr>
      <tr>
        <td class="td-label">险种</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.types_of_insurance || '-' }}</span>
          <el-input v-else placeholder="险种" v-model="customer.types_of_insurance"></el-input>
        </td>
        <td class="td-label">投保面积/数量</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.ins_spec || '-' }}</span>
          <el-input v-else placeholder="投保面积/数量" v-model="customer.ins_spec"></el-input>
        </td>
      </tr>
      <tr>
        <td class="td-label">保额（万元）</td>
        <td :class="tdClass" colspan="3">
          <span v-if="isView">{{ customer.coverage || '-' }}</span>
          <el-input
            v-else
            placeholder="保额（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.coverage"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" class="font-weight-bold text-center">享受的农业补贴信息</td>
      </tr>
      <tr>
        <td class="td-label">补贴类型</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.subsidies_type || '-' }}</span>
          <el-input v-else placeholder="补贴类型" v-model="customer.subsidies_type"></el-input>
        </td>
        <td class="td-label">补贴金额（万元）</td>
        <td :class="tdClass">
          <span v-if="isView">{{ customer.subsidies_funds || '-' }}</span>
          <el-input
            v-else
            placeholder="补贴金额（万元）"
            v-input-number="{ min: 0, fixed: 2 }"
            v-model="customer.subsidies_funds"
          ></el-input>
        </td>
      </tr>
    </table>

    <div class="text-center py-3" v-if="!isView">
      <el-button type="primary" class="btn-long" @click="onSubmit">保存</el-button>
      <el-button class="btn-long" @click="beforClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import SelectFarmOrg from '@/components/select/SelectFarmOrg'
import SelectAddress from '@/components/select/SelectAddress'
import { idCardValidate, licenseValidate } from '@vimi/utils-tool'
import { checkPhoneNumber } from '@/common/plugins/validator'
export default {
  components: {
    SelectFarmOrg,
    SelectAddress,
  },
  props: {
    queryId: String,
    viewMode: { type: Boolean, default: true },
  },
  data() {
    return {
      customer: {},
      loading: false,
      tableName: 'credit_direct',
      customerData: {},
    }
  },
  computed: {
    isView() {
      return this.viewMode
    },
    tdClass() {
      return this.isView ? '' : 'input-td'
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    checkRegisterNo(v) {
      if (!licenseValidate(v)) {
        this.$message.error('社会信用代码格式错误，请检查！')
        return false
      }
      return true
    },
    checkIdCard(v) {
      if (!idCardValidate(v)) {
        this.$message.error('身份证号格式错误，请检查！')
        return false
      }
      return true
    },
    checkMobileNo(v) {
      if (!checkPhoneNumber(v)) {
        this.$message.error('手机号格式错误，请检查！')
        return false
      }
      return true
    },
    onSubmit() {
      const data = {}
      Object.keys(this.customer).forEach(key => {
        if (this.customer[key] !== this.customerData[key]) {
          data[key] = this.customer[key]
        }
      })
      this.$api
        .updateData(this.$serviceName, this.tableName, this.queryId, data)
        .then(() => {
          this.$message.success('保存成功')
          this.$emit('success')
        })
        .catch(() => {
          this.$message.error('保存失败，请重试！')
        })
    },
    getData() {
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'credit_direct_id.eq': this.queryId })
        .then(res => {
          this.customer = res?.data?.[0] ?? {}
          this.customerData = { ...this.customer }
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforClose() {
      this.customer = { ...this.customerData }
      this.$emit('close', false)
    },
    setClassName(name, v) {
      this.customer.org_class_name = name || ''
      this.customer.customer_type = v.customerType || ''
      if (+v.customerType === 2) {
        this.customer.register_no = ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.table-vertical-middle td {
  vertical-align: middle;
}
.td-label {
  background-color: #f8f9fa;
  text-align: center;
}
.input-td {
  background-color: #ffffee;
}
</style>
